<template>
  <div id="yg_recommend">
    <h3 class="title">推荐文章</h3>
    <ul class="list">
      <li
        class="item"
        v-for="item in articleList"
        :key="item?.id"
        :style="{ backgroundImage: `url(${item?.cover})` }"
      >
        <router-link :to="`/article/${item?.id}`">
          <div class="content">
            <h4>{{ item?.title }}</h4>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'YgRecommend',
  data() {
    return {
      articleList: [
        {
          id: 1,
          title: '文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1',
          cover: require('@/assets/images/img_cover01.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 1, title: 'Vue', backgroundColor: 'brown' },
            { id: 2, title: 'React', backgroundColor: 'orange' },
            { id: 3, title: 'Axios', backgroundColor: 'blue' },
            { id: 4, title: '正则', backgroundColor: 'purple' }
          ],
          created_at: '2021-12-23T10:45:21+08:00',
          updated_at: '2021-12-24T11:33:44+08:00',
          release_at: '2021-12-24T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 232,
          content: `
          <h1 style="text-align: justify;">H1标题1</h1>
          <p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p><p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <h2 style="text-align: justify;">H2标题2</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题3</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h1 style="text-align: justify;">标题</h1>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p>`
        },
        {
          id: 2,
          title: '协助数字新基建，协助数字经济',
          cover: require('@/assets/images/img_cover02.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [
            { id: 5, title: '拖拽', backgroundColor: 'blue' },
            { id: 6, title: '测', backgroundColor: 'red' },
            { id: 7, title: '试', backgroundColor: 'black' }
          ],
          created_at: '2021-12-26T10:45:21+08:00',
          updated_at: '2022-12-26T11:33:44+08:00',
          release_at: '2022-12-26T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 322,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 3,
          title: '文章标题3',
          cover: require('@/assets/images/img_cover03.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [{ id: 8, title: 'antd', backgroundColor: 'violet' }],
          created_at: '2022-02-07T10:45:21+08:00',
          updated_at: '2022-02-07T11:33:44+08:00',
          release_at: '2022-02-07T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 4,
          title: '文章标题4',
          cover: require('@/assets/images/img_cover04.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 9, title: '正则', backgroundColor: 'green' },
            { id: 10, title: '表达式', backgroundColor: 'teal' }
          ],
          created_at: '2022-05-07T10:45:21+08:00',
          updated_at: '2022-05-08T11:33:44+08:00',
          release_at: '2022-05-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 5,
          title: '文章标题5',
          cover: require('@/assets/images/img_cover05.png'),
          category_id: 3,
          category_info: { id: 3, title: '随心记', backgroundColor: 'pink' },
          tagsList: [{ id: 1, title: 'Vue', backgroundColor: 'brown' }],
          created_at: '2022-12-07T10:45:21+08:00',
          updated_at: '2022-12-08T11:33:44+08:00',
          release_at: '2022-12-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
#yg_recommend {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  & > .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0 12px;
    height: 40px;
    background-color: #eaeaea;
    font-size: 14px;
    font-weight: 500;
    color: #3d3d3d;
    user-select: none;
    cursor: default;
  }
  & > .list {
    display: flex;
    flex-direction: column;
    padding: 0 12px 12px !important;
    background-color: #fff;
    & > .item {
      display: flex;
      flex-direction: row;
      margin-top: 12px;
      height: 80px;
      border-radius: 4px;
      background-color: #fafafa;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      user-select: none;
      cursor: pointer;
      &:hover {
        & > a {
          & > .content {
            background-color: rgba(0, 0, 0, 0.36);
          }
        }
      }
      & > a {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        & > .content {
          align-self: end;
          width: 100%;
          padding: 10px 6px;
          & > h4 {
            align-self: end;
            margin: 0;
            font-size: 12px;
            font-weight: 400;
            color: #fff;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
    }
  }
}
</style>
